<template>
  <el-dialog
    title="修改密码"
    :visible="show"
    width="600px"
    :before-close="close"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="80px"
    >
      <el-form-item
        v-if="userMode"
        label="旧密码"
        prop="oldPassword"
      >
        <el-input
          placeholder="旧密码"
          type="password"
          v-model.trim="form.oldPassword"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="新密码"
        prop="password"
      >
        <el-input
          placeholder="新密码"
          type="password"
          v-model.trim="form.password"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="确认密码"
        prop="confirmPassword"
      >
        <el-input
          placeholder="确认密码"
          type="password"
          v-model.trim="form.confirmPassword"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button
        size="small"
        @click="close"
      >关闭</el-button>
      <el-button
        @click="save"
        size="small"
        type="primary"
      >保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    name: 'AddStaff',
    props: {
      show: {
        type: Boolean,
        default: false
      },
      userId: {
        type: Number,
        default: 0
      },
      userMode: {
        type: Boolean,
        default: false
      }
    },
    data () {
      const validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.form.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        form: {
          oldPassword: '',
          password: '',
          confirmPassword: ''
        },
        rules: {
          oldPassword: [
            { required: true, message: '请输入用户密码', trigger: 'blur' },
            { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入用户密码', trigger: 'blur' },
            { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
          ],
          confirmPassword: [
            { validator: validatePass2, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      close () {
        this.$emit('close')
      },
      validate (form = 'form') {
        return new Promise((resolve, reject) => {
          this.$refs[form].validate(valid => {
            if (valid) return resolve(true)
            reject(new Error('fail'))
          })
        })
      },
      async save () {
        await this.validate()
        if (this.userMode) {
          await this.$service.gzl.changePasswodByUser({
            password: this.form.password,
            oldPassword: this.form.oldPassword
          })
          this.$message.success('密码修改成功,请重新登录')
          sessionStorage.clear()
          this.$router.push('/login')
        } else {
          await this.$service.gzl.changePasswod(this.userId, this.form.password)
          this.$message.success('新密码设置成功')
          this.$emit('close')
        }
      }
    }
  }
</script>

<style scoped>

</style>
